<script setup>
	import { computed, ref } from 'vue'
	import { message } from 'ant-design-vue'
	import { CopyOutlined, DownloadOutlined } from '@ant-design/icons-vue'
	import JsonEditor from '@/views/plugin/dashboard/plugin/public/JsonEditor/JsonEditor.vue'

	const props = defineProps({
		responseData: {
			type: [Object, Array, String],
			default: null
		},
		loading: {
			type: Boolean,
			default: false
		},
		responseTime: {
			type: Number,
			default: 0
		},
		responseSize: {
			type: Number,
			default: 0
		}
	})

	// 响应数据格式化选项
	const responseFormat = ref('json')
	const responseFormats = [
		{ label: 'JSON', value: 'json' },
		{ label: 'Raw', value: 'raw' },
		{ label: 'Preview', value: 'preview' }
	]

	// 计算属性
	const formattedResponseData = computed(() => {
		if (!props.responseData) return ''

		try {
			switch (responseFormat.value) {
				case 'json':
					return JSON.stringify(props.responseData, null, 2)
				case 'raw':
					return typeof props.responseData === 'string' ? props.responseData : JSON.stringify(props.responseData)
				case 'preview':
					return props.responseData
				default:
					return JSON.stringify(props.responseData, null, 2)
			}
		} catch (error) {
			return String(props.responseData)
		}
	})

	const responseStatus = computed(() => {
		if (!props.responseData) return null
		return {
			code: 200,
			text: 'OK',
			color: 'success'
		}
	})

	// 复制响应数据
	const copyResponse = () => {
		if (formattedResponseData.value) {
			navigator.clipboard.writeText(formattedResponseData.value)
			message.success('已复制到剪贴板')
		}
	}

	// 下载响应数据
	const downloadResponse = () => {
		if (!formattedResponseData.value) return

		const blob = new Blob([formattedResponseData.value], { type: 'application/json' })
		const url = URL.createObjectURL(blob)
		const a = document.createElement('a')
		a.href = url
		a.download = `api-response-${Date.now()}.json`
		a.click()
		URL.revokeObjectURL(url)
		message.success('文件下载成功')
	}
</script>

<template>
	<div class="response-section">
		<div class="response-header">
			<div class="response-status">
				<span v-if="responseStatus" class="status-info">
					<a-tag :color="responseStatus.color" size="small">
						{{ responseStatus.code }} {{ responseStatus.text }}
					</a-tag>
					<span class="response-time">{{ responseTime }}ms</span>
					<span class="response-size">{{ Math.round((responseSize / 1024) * 100) / 100 }}KB</span>
				</span>
				<span v-else class="no-response">暂无响应数据</span>
			</div>
			<div class="response-actions">
				<a-radio-group v-model="responseFormat" size="small">
					<a-radio-button v-for="format in responseFormats" :key="format.value" :value="format.value">
						{{ format.label }}
					</a-radio-button>
				</a-radio-group>
				<a-button :disabled="!responseData" size="small" type="text" @click="copyResponse">
					<copy-outlined />
				</a-button>
				<a-button :disabled="!responseData" size="small" type="text" @click="downloadResponse">
					<download-outlined />
				</a-button>
			</div>
		</div>
		<div class="response-content">
			<div v-if="loading" class="loading-state">
				<a-spin size="large" />
				<div class="loading-text">正在发送请求...</div>
			</div>
			<div v-else-if="!responseData" class="empty-state">
				<div class="empty-icon">📡</div>
				<div class="empty-text">点击"发送"按钮获取响应数据</div>
			</div>
			<div v-else class="response-data">
				<div v-if="responseFormat === 'preview'" class="response-preview">
					<a-table
						v-if="Array.isArray(responseData) && responseData.length > 0"
						:columns="Object.keys(responseData[0]).map((key) => ({ title: key, dataIndex: key, key }))"
						:data-source="responseData"
						:pagination="{ pageSize: 10 }"
						bordered
						size="small"
					/>
					<div v-else class="preview-fallback">
						<JsonEditor :model-value="responseData" :read-only="true" theme="vs-light" />
					</div>
				</div>
				<div v-else class="response-raw">
					<JsonEditor :model-value="formattedResponseData" :read-only="true" theme="vs-light" />
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
	.response-section {
		flex: 1;
		background: #fff;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.response-header {
		padding: 12px 20px;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fafafa;
	}

	.response-status {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.status-info {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.response-time,
	.response-size {
		font-size: 12px;
		color: #8c8c8c;
	}

	.no-response {
		color: #8c8c8c;
		font-size: 14px;
	}

	.response-actions {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.response-content {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.loading-state {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
	}

	.loading-text {
		color: #8c8c8c;
		font-size: 14px;
	}

	.empty-state {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
	}

	.empty-icon {
		font-size: 48px;
		opacity: 0.3;
	}

	.empty-text {
		color: #8c8c8c;
		font-size: 14px;
	}

	.response-data {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.response-preview,
	.response-raw {
		flex: 1;
		overflow: auto;
		padding: 20px;
	}

	.preview-fallback {
		height: 400px;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.response-header {
			flex-direction: column;
			gap: 8px;
			align-items: flex-start;
		}

		.response-actions {
			width: 100%;
			justify-content: space-between;
		}

		.response-preview,
		.response-raw {
			padding: 12px;
		}
	}
</style>
